<!DOCTYPE html>
<html>
    <head>
        <title>站点标题</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- jquery -->
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <!-- 含有popper的bootstrap -->
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
        <!-- 动画 -->
        <script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>
        <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">
        <!-- 开发版vue，有错误信息 -->
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        <!-- 生产版vue，没有错误信息 -->
        <!-- <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> -->
        <!-- 图表 -->
        <link rel="stylesheet" href="https://cdn.bootcss.com/Chart.js/2.8.0-rc.1/Chart.min.css">
        <script src="https://cdn.bootcss.com/Chart.js/2.8.0-rc.1/Chart.bundle.min.js"></script>
        <!-- 矢量字体图标 -->
        <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <!-- sweetalert弹出框 -->
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.css">
        <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js"></script>

        <!-- 百度echarts图表 -->
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-beta.2/echarts.min.js"></script>
        <!-- 百度echarts图表 百度地图 -->
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-beta.2/extension/bmap.min.js"></script>
        <!-- 百度echarts图表 关系图表 -->
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-beta.2/extension/dataTool.min.js"></script>
    </head>
<body>
    <div class="container">
        <br><br><br>
        <!-- 动画示例 -->
        <h1 class="animated infinite bounce">动画效果示例</h1>
        <hr>

        <!-- 图标示例 -->
        <p>矢量图标示例：<i class="fa fa-user-o fa-3x"></i></p>
        <hr>

        <!-- vue示例 -->
        <div id="app" class="alert alert-success">
            vue示例：
            <p>{{message}}</p>
        </div>
        <hr>

        <!-- 图表示例 -->
        chart图表示例：
        <canvas id="myChart" style="width: 100%;height:400px;"></canvas>
        <hr>

        百度Echarts图表示例：
        <div id="main" style="width: 100%;height:400px;"></div>
        <button onclick="msg('delefnc', '操作提示', '来自sweetalert弹出框的提示\n确定要删除文件吗？')" class="btn btn-info">弹出框</button>
        <br><br><br>

    <div>
    <script>
        /**--------------------------------
         * vue示例
         * --------------------------------
         */
        var vm = new Vue({
            el: app,
            data:{
                 message: "hello Vue!"
            }
        });
        
        /**--------------------------------
         * chars.js图表示例
         * --------------------------------
         */
        var ctx = document.getElementById("myChart").getContext("2d");
        var data = {
                /// 表现在X轴上的数据，数组形式
                     labels : ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
                 /// 第一条线
                     datasets : [
                     {
                         label: '第一组数据示例',
                             /// 曲线的填充颜色
                                 fillColor : "rgba(220,0,0,1)",
                             /// 填充块的边框线的颜色
                                 strokeColor : "rgba(220,0,0,1)",
                             /// 表示数据的圆圈的颜色
                                 pointColor : "rgba(220,220,220,1)",
                             /// 表示数据的圆圈的边的颜色
                                 pointStrokeColor : "#f00",
                                 data : [65.5,59.2,90,81,56,55,40],
                                 backgroundColor: [
                                     'rgba(153, 102, 255, 0.6)',
                                     'rgba(153, 102, 255, 0.6)',
                                     'rgba(153, 102, 255, 0.6)',
                                     'rgba(153, 102, 255, 0.6)',
                                     'rgba(153, 102, 255, 0.6)',
                                     'rgba(153, 102, 255, 0.6)',
                                     'rgba(153, 102, 255, 0.6)'
                                 ]
             },
             /// 第二条线
             {
                 label: '第二组数据示例',
                         fillColor : "rgba(151,187,205,0.5)",
                         strokeColor : "rgba(151,187,205,1)",
                         pointColor : "rgba(151,187,205,1)",
                         pointStrokeColor : "#fff",
                         data : [28,48,40,18,86,27,100],
                         backgroundColor: [
                                     'rgba(255, 99, 132, 0.6)',
                                     'rgba(255, 99, 132, 0.6)',
                                     'rgba(255, 99, 132, 0.6)',
                                     'rgba(255, 99, 132, 0.6)',
                                     'rgba(255, 99, 132, 0.6)',
                                     'rgba(255, 99, 132, 0.6)',
                                     'rgba(255, 99, 132, 0.6)'
                                 ]
                 }
             ]
         }
        /// 创建对象，生成图表，type为bar是柱状图，为line是折线图
        var myLineChart = new Chart(ctx, {
            type: 'bar',
            data: data,
                options: {
                    scales: {
                        yAxes: [{
                            tension: 0,
                        }]
                    }
                }
             });
    
    /**--------------------------------
     * sweetalert模态框的使用
     * --------------------------------
     */
    
    msg('delefnc', '操作提示', '来自sweetalert弹出框的提示\n确定要删除文件吗？');
    function delefnc(){
        alert('删除成功！');
    }

    /**
     * sweetalert 模态弹出消息框
     * 
     * title         弹出框的title
     * text          弹出框里面的提示文本
     * type          弹出框类型
     * showCanBtn    是否显示取消按钮
     * showCfmBtn    是否显示确定按钮
     * cfmBtnColor   确定按钮颜色
     * canBtnText    取消按钮文本
     * cfmBtnText    确定按钮上面的文档
     */
    function msg(fncName = "", title = "操作提示", text = "确定吗？", canBtnText = "取消", cfmBtnText = "确定", type = "warning", cfmBtnColor = "#000080", showCanBtn = true, showCfmBtn = true){
        swal({
            title: title,      //弹出框的title
            text: text,   //弹出框里面的提示文本
            type: type,        //弹出框类型 warning
            showCancelButton: showCanBtn, //是否显示取消按钮
            showConfirmButton: showCfmBtn,
            confirmButtonColor: cfmBtnColor,//确定按钮颜色
            cancelButtonText: canBtnText,//取消按钮文本
            confirmButtonText: cfmBtnText,//确定按钮上面的文档
            closeOnConfirm: true
        }, function(){
            if(!isEmpty(fncName)){
                
                //注意：eval函数属于高危函数，注意防XSS攻击！
                eval(fncName + '()');
            }
        }
    )};
    
    
    /**
     * 判断变量是否为空，
     * @param  {[type]}  param 变量
     * @return {Boolean}      为空返回true，否则返回false。
     */
    function isEmpty(param){
        if(param){
            var param_type = typeof(param);
            if(param_type == 'object'){
                //要判断的是【对象】或【数组】或【null】等
                if(typeof(param.length) == 'undefined'){
                    if(JSON.stringify(param) == "{}"){
                        return true;//空值，空对象
                    }
                }else if(param.length == 0){
                    return true;//空值，空数组
                }
            }else if(param_type == 'string'){
                //如果要过滤空格等字符
                var new_param = param.trim();
                if(new_param.length == 0){
                    //空值，例如:带有空格的字符串" "。
                    return true;
                }
            }else if(param_type == 'boolean'){
                if(!param){
                    return true;
                }
            }else if(param_type== 'number'){
                if(!param){
                    return true;
                }
            }
            return false;//非空值
        }else{
            //空值,例如：
            //(1)null
            //(2)可能使用了js的内置的名称，例如：var name=[],这个打印类型是字符串类型。
            //(3)空字符串''、""。
            //(4)数字0、00等，如果可以只输入0，则需要另外判断。
            return true;
        }
    }
    
    /**--------------------------------
     *  百度echarts图表示例 
     * --------------------------------
     */
    
    var myChart = echarts.init(document.getElementById('main'));
    
    var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];

    app.configParameters = {
        rotate: {
            min: -90,
            max: 90
        },
        align: {
            options: {
                left: 'left',
                center: 'center',
                right: 'right'
            }
        },
        verticalAlign: {
            options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom'
            }
        },
        position: {
            options: echarts.util.reduce(posList, function (map, pos) {
                map[pos] = pos;
                return map;
            }, {})
        },
        distance: {
            min: 0,
            max: 100
        }
    };

    app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
            var labelOption = {
                normal: {
                    rotate: app.config.rotate,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    position: app.config.position,
                    distance: app.config.distance
                }
            };
            myChart.setOption({
                series: [{
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }]
            });
        }
    };


    var labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
            name: {
                textBorderColor: '#fff'
            }
        }
    };

    option = {
        color: ['#003366', '#006699', '#4cabce', '#e5323e'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['Forest', 'Steppe', 'Desert', 'Wetland']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: ['2012', '2013', '2014', '2015', '2016']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Forest',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                data: [320, 332, 301, 334, 390]
            },
            {
                name: 'Steppe',
                type: 'bar',
                label: labelOption,
                data: [220, 182, 191, 234, 290]
            },
            {
                name: 'Desert',
                type: 'bar',
                label: labelOption,
                data: [150, 232, 201, 154, 190]
            },
            {
                name: 'Wetland',
                type: 'bar',
                label: labelOption,
                data: [98, 77, 101, 99, 40]
            }
        ]
    };
    
    myChart.setOption(option);
    </script>
</body>
</html>